<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tableDemo</title>
    <style type="text/css">
      .text-center {
        border: 1px solid #000;
      }
      th {
        position: relative;
        pointer-events: none;
      }
      

      th::after {
        content: 'x';
        width: 20px;
        height: 20px;
        background: red;
        border-radius: 20px;
        border: solid 2px #fff;
        background: #ff0000;
        line-height: 18px;
        text-align: center;
        color: #fff;
        transform: scale(0.5, 0.5);
        position: absolute;
        right: -10px;
        top: -10px;
        cursor: pointer;
        pointer-events: auto;
      }
      th:last-child::after{
        display: none;
      }
      
    </style>
  </head>
  <body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </body>
  <script>
    var selectedNumber = 1;
    var rowNumber = 3;
    let selectBtn = document.querySelectorAll('button');
    var arr = [
      {
        id: '1001',
        name: '苹果',
        price: 2000,
      },
      {
        id: '1002',
        name: '小米',
        price: 2100,
      },
      {
        id: '1003',
        name: '华为',
        price: 2200,
      },
      {
        id: '1004',
        name: '锤子',
        price: 2300,
      },
      {
        id: '1005',
        name: '三星',
        price: 2400,
      },
      {
        id: '1006',
        name: '三星',
        price: 2400,
      },
      {
        id: '1007',
        name: '三星',
        price: 2400,
      },
      {
        id: '1008',
        name: '三星',
        price: 2400,
      },
      {
        id: '1009',
        name: '三星',
        price: 2400,
      },
      {
        id: '1010',
        name: '三星',
        price: 2400,
      },
      {
        id: '1011',
        name: '三星',
        price: 2400,
      },
    ];

    //表头
    var tablehead = ['','id', 'name', 'price'];
    //初始化，创建了容纳table的body和div
    function init() {
      var body = document.body;
      var container = document.createElement('div');
      container.setAttribute('class', 'table-container');
      body.appendChild(container);
      return container;
    }

    //创建表格
    function inittable(container) {
      var table = document.createElement('table');
      table.setAttribute('cellspacing', '0');
      container.appendChild(table);

      var tr_head = document.createElement('tr');

      table.appendChild(tr_head);

      // 根据表头数量创建th,并且添加类名
      for (var i = 0; i < tablehead.length; i++) {
        var th = document.createElement('th');

        th.setAttribute('class', 'text-center');

        th.innerHTML = tablehead[i];

        tr_head.appendChild(th);
      }
      /**
        *TODO:
        **使用for循环将对象加入到table中去
        **k控制的是选取数组对象的一个范围，正确修改该值以实现分页
         **要获取到k的起始值
         **第一页1*3-3=0(遍历0,1,2)    第二页2*3-3=3(3,4,5)

         **k的初始值没有问题，k的上限应该由数组对象的长度来修改
         **数组对象的长度和每页tr数量，需要获取当前页数的上限

         **如果我们数组对象的长度为5，
        */
      for (
        var k = selectedNumber * rowNumber - rowNumber;
        k < rowNumber * selectedNumber;
        k++
      ) {
        var tr = document.createElement('tr');

        table.appendChild(tr);

        // 按照th的数量添加列td
        if (arr[k] === undefined) {
          break;
        }
        for (var j = 0; j < tablehead.length; j++) {
          var td = document.createElement('td');

          td.setAttribute('class', 'text-center');
          // 根据属性名来获取属性值
          td.innerHTML = arr[k][tablehead[j]];
          tr.appendChild(td);
        }
      }
    }
    //   在页面完全载入后(包括图片、css文件等等。)执行脚本代码window.onload = function ()
    // 添加到DOM树上
    var table = init();
    inittable(table);

    /**
     *TODO:btn的输出的值x既是tr的数量，读取的都是从table列表的首位开始
     **每一次点击按钮的时候都需要先把原来的表格先给删除
     **理想状态是我们还需要给定一个固定的包含有多少行的数值y,x*y表示的是从开始到选定的结束，x*y-y既是我们分页所得数据
     */
    for (let i = 0; i < selectBtn.length; i++) {
      selectBtn[i].addEventListener('click', (e) => {
        var childNode = document.getElementsByClassName('table-container')[0];

        var parentNode = document.body;
        parentNode.removeChild(childNode);
        console.log(e.target.innerText);
        //   更新表格的行数
        selectedNumber = e.target.innerText;
        var table = init();
        inittable(table);

        getThTags()
      });
    }

    // 获取th并监听伪元素的点击事件

    function getThTags() {
      var TH = document.querySelectorAll('th');
      console.log(TH);
      for (let j = 0; j < TH.length; j++) {
        TH[j].addEventListener('click', () => {
          console.log(j);
          toogleCols(j);
        });
      }
    }

    //   封装显隐列函数
    function toogleCols(flag) {
      // 获取table,切换按钮并对Btn添加事件
      var tab = document.getElementsByTagName('table')[0];

      // 获取表格的所有行
      var trs = tab.rows;
      for (var i = 0, len = trs.length; i < len; i++) {
        // 每一行都有一个cells包含该行的所有td
        // 对于每一行的第二列进行显影
        var cell = trs[i].cells[flag+1];
        if (cell.style.display == 'none') {
          cell.style.display = '';
        } else {
          cell.style.display = 'none';
        }
      }
    }

    getThTags();
  </script>
</html>
